<script setup>
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'
import { getBusinessList } from '@/api/index'
import NavBar from '@/components/NavBar.vue'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'

// 滚动距离，用于导航栏背景色渐变
const scrollTop = ref(0)
onPageScroll((event) => {
  scrollTop.value = event.scrollTop
})

// 酒店餐饮列表
const businessList = ref([])
const businessTotal = ref(0)

// 查询参数
const searchQuery = ref({
  title: '',
  pageNo: 1,
  pageSize: 20,
})

async function onGetBusinessList() {
  const { result: { records, total } } = await getBusinessList(searchQuery.value)
  businessList.value = [
    ...records.map(item => ({
      ...item,
      url: fixCoverImageUrl(item.cover),
      tags: item.tags.split(','),
    })),
    ...businessList.value,
  ]
  businessTotal.value = total
}

function onClear() {
  searchQuery.value.title = ''
  onManualSearch()
}

// 手动搜索商家
function onManualSearch() {
  businessList.value = []
  searchQuery.value.pageNo = 1
  onGetBusinessList()
}

// 触底加载
onReachBottom(() => {
  if (businessList.value.length < businessTotal.value) {
    searchQuery.value.pageNo++
    onGetBusinessList()
  }
})

function goBusinessDetail(id) {
  uni.navigateTo({ url: `/pages/index/view/business-detail?id=${id}` })
}

onMounted(() => {
  onGetBusinessList()
})
</script>

<template>
  <view class="pb-safe min-h-safe">
    <NavBar title="酒店餐饮" :scroll-top="scrollTop" />
    <view class="relative">
      <image class="h-326 w-full" src="@/static/image/index/business-bg.jpg" />
      <view class="flex gap-6 absolute items-center left-20 top-60">
        <view class="w-680">
          <nut-searchbar v-model="searchQuery.title" placeholder="搜索" background="transparent" @clear="onClear">
            <template #rightout>
              <nut-icon name="search2" custom-color="#fff" @click="onManualSearch" />
            </template>
          </nut-searchbar>
        </view>
      </view>
    </view>
    <main class="px-1.5 pt-1.5">
      <view class="flex flex-col gap-3">
        <view
          v-for="item in businessList"
          :key="item.id"
          class="p-2 bg-white rounded shadow flex flex-col"
          @click="goBusinessDetail(item.id)"
        >
          <view class="flex gap-2">
            <view class="flex-shrink-0 h-220 w-190">
              <img class="rounded h-full w-full" :src="item.url" alt="">
            </view>
            <view class="flex flex-col w-full justify-between">
              <view class="flex flex-col gap-1">
                <p class="text-30 font-semibold">
                  {{ item.title }}
                </p>
                <p class="text-25 text-[#666] line-clamp-2">
                  {{ item.remark }}
                </p>
              </view>
              <view class="flex flex-col gap-2">
                <view class="text-25 flex gap-1">
                  <nut-tag v-for="tagItem in item.tags" :key="tagItem" plain custom-color="#FF4600">
                    {{ tagItem }}
                  </nut-tag>
                </view>
                <p class="text-25 text-[#666]">
                  {{ item.address }}
                </p>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="pt-4.5 text-22 text-[#ccc] text-center">
        没有更多了
      </view>
    </main>
  </view>
</template>

<style scoped>
:deep(.nut-input) {
  padding: 5px 5px 5px 15px;
}

.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
